import { getCssVariableValue } from '@/utils/utils';
import _ from 'lodash';

export const getEChartsOption = (params = {}) => {
  const { xAxisData = [], timelineData = [], dataZoomIsShow = false, legendBottom = 38 } = params;
  return {
    ...(timelineData?.length
      ? {
          timeline: {
            axisType: 'category',
            orient: 'vertical',
            autoPlay: false,
            inverse: true,
            playInterval: 3000,
            left: 'right',
            right: 10,
            top: 10,
            bottom: 4,
            width: 80,
            height: null,
            symbol: 'none',
            checkpointStyle: {
              symbolSize: 10,
              borderWidth: 2,
              color: 'white',
              borderColor: getCssVariableValue('--bd-primary'),
            },
            controlStyle: {
              itemSize: 13,
              showNextBtn: false,
              showPrevBtn: false,
            },
            lineStyle: {
              show: true,
              color: getCssVariableValue('--chart-x-line'),
              width: 1,
              type: 'solid',
            },
            label: {
              color: getCssVariableValue('--chart-font-color'),
            },
            data: timelineData || [],
          },
        }
      : {}),
    title: [],
    tooltip: {
      trigger: 'axis',
      backgroundColor: getCssVariableValue('--step-bg'),
      borderColor: getCssVariableValue('--step-bg'),
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: getCssVariableValue('--step-bg'),
        },
      },
    },
    grid: { left: 0, right: 96, top: 10, bottom: 56, containLabel: true },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: xAxisData || [],
      nameGap: 12,
      axisTick: { alignWithLabel: true },
      nameTextStyle: { color: getCssVariableValue('--chart-font-color') },
      axisLabel: { color: getCssVariableValue('--chart-font-color') },
      axisLine: { lineStyle: { color: getCssVariableValue('--chart-x-line') } },
      axisPointer: {
        label: {
          backgroundColor: getCssVariableValue('--bd-primary'),
          color: getCssVariableValue('--ant-cus-font_active'),
          shadowBlur: 0,
        },
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-x-line'),
        },
      },
      splitNumber: Math.random(),
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      nameTextStyle: { color: getCssVariableValue('--chart-font-color') },
      axisLabel: { color: getCssVariableValue('--chart-font-color') },
      splitLine: { lineStyle: { color: getCssVariableValue('--chart-y-line') } },
      splitNumber: 4,
      axisPointer: {
        label: {
          backgroundColor: getCssVariableValue('--bd-primary'),
          color: getCssVariableValue('--ant-cus-font_active'),
          shadowBlur: 0,
        },
        lineStyle: {
          type: 'solid',
          color: getCssVariableValue('--chart-x-line'),
        },
      },
    },
    // 缩放轴
    dataZoom: [
      { type: 'inside', show: dataZoomIsShow, minSpan: 1 },
      { type: 'slider', height: 20, show: dataZoomIsShow, minSpan: 1, bottom: 10 },
    ],
    // 图列组件
    legend: {
      bottom: legendBottom || 38,
      textStyle: {
        color: getCssVariableValue('--chart-legend-color'),
        rich: {
          update_time: {
            color: '#888E95',
          },
        },
      },
      padding: [0, 35, 0, 35],
      itemWidth: 16,
      itemHeight: 8,
      inactiveColor: '#545454',
      inactiveBorderColor: '#545454',
      inactiveBorderWidth: 'inherit',
    },
    series: [],
  };
};

export const getTableData = (columns = [], resData = {}) => {
  let tableDataObj = {};
  const { xAxis = [], ...other } = resData;

  Object.keys(other || {}).forEach((key) => {
    tableDataObj[key] = {};

    columns.forEach((cVal, cInd) => {
      tableDataObj[key][cVal.code] = _.isNumber(other[key][cInd])
        ? isNaN(Number(other[key][cInd]))
          ? null
          : other[key][cInd]
        : other[key][cInd];
    });
  });
  return Object.values(tableDataObj || {});
};
